<template>
  <van-swipe :loop="false" :show-indicators="false" @change="onSwipeChange">
    <van-swipe-item v-for="(prods, index) in prodArr" :key="index">
      <div class="list">
        <div
          class="item"
          v-for="(prodItem, index) in prods"
          :key="index"
          @click="handleClick(prodItem)"
        >
          <div
            class="prod-img"
            v-lazy:background-image="bgImage(prodItem.productImage)"
          ></div>
          <div class="prod-name">
            {{ prodItem.productName }}niahahahhagagagaggagagagg
          </div>
          <div class="prod-btn">
            <span>¥</span>
            <span class="price">{{ prodItem.price }}</span>
            <span class="tag-price">¥{{ prodItem.underlinePrice }}</span>
          </div>
        </div>
      </div>
    </van-swipe-item>
  </van-swipe>
</template>

<script>
export default {
  name: 'hotSaleProduct',
  data() {
    return {
      list: [
        {
          productNo: 1, // 商品No
          productName: 'aaaa', // 商品名称
          productDesc: '商品描述', // 商品描述
          productImage:
            'https://akmer.aikucun.com/mshop/6b7c2911f819000a69e48a0d0b16a4e56761fa58_1589008053531_84.jpg', // 商品图片地址
          price: 100, // 销售价
          underlinePrice: 150
        },
        {
          productNo: 2, // 商品No
          productName: '商品名称商品名称商品名称商品名称商品名称', // 商品名称
          productDesc: '商品描述', // 商品描述
          productImage:
            'https://akmer.aikucun.com/mshop/6b7c2911f819000a69e48a0d0b16a4e56761fa58_1589008053531_84.jpg', // 商品图片地址
          price: 100, // 销售价
          underlinePrice: 150
        },
        {
          productNo: 3, // 商品No
          productName: 'aaaa', // 商品名称
          productDesc: '商品描述', // 商品描述
          productImage:
            'https://akmer.aikucun.com/mshop/6b7c2911f819000a69e48a0d0b16a4e56761fa58_1589008053531_84.jpg', // 商品图片地址
          price: 100, // 销售价
          underlinePrice: 150
        },
        {
          productNo: 4, // 商品No
          productName: 'aaaa', // 商品名称
          productDesc: '商品描述', // 商品描述
          productImage:
            'https://akmer.aikucun.com/mshop/6b7c2911f819000a69e48a0d0b16a4e56761fa58_1589008053531_84.jpg', // 商品图片地址
          price: 100, // 销售价
          underlinePrice: 150
        }
      ]
    };
  },
  computed: {
    prodArr() {
      const rowNum = 3;
      const arr = [];
      let minArr = [];
      this.list.forEach(item => {
        if (minArr.length === rowNum) {
          minArr = [];
        }
        if (minArr.length === 0) {
          arr.push(minArr);
        }
        minArr.push(item);
      });
      return arr;
    }
  },
  methods: {
    bgImage(imgUrl) {
      if (imgUrl) {
        imgUrl = `${imgUrl}?x-oss-process=image/resize,w_115`;
        return imgUrl;
      }
      return '';
    },
    onSwipeChange() {
      // todo
    },
    handleClick(obj) {
      this.$emit('goProductDetail', obj);
    }
  }
};
</script>

<style lang="scss" scoped>
.list {
  width: 100%;
  display: flex;
  margin: 0 10px;
  .item {
    width: 115px;
    height: 167px;
    background: rgba(255, 255, 255, 1);
    border-radius: 5px;
    position: relative;
    margin-right: 5px;
    &:last-child {
      margin-right: 0;
    }
  }
  .prod-img {
    width: 115px;
    height: 117px;
    border-radius: 5px 5px 0 0;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
  }
  .prod-name {
    width: 100px;
    font-size: 12px;
    font-family: PingFangSC-Medium;
    font-weight: 500;
    color: rgba(0, 0, 0, 1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: break-all;
    margin: 3px auto;
  }
  .prod-btn {
    width: 98px;
    height: 19px;
    font-family: PingFangSC-Regular;
    background: linear-gradient(
      183deg,
      rgba(192, 1, 255, 1) 0%,
      rgba(254, 107, 50, 1) 0%,
      rgba(255, 1, 1, 1) 100%
    );
    border-radius: 10px;
    margin: 0 auto;
    color: rgba(255, 255, 255, 1);
    font-size: 10px;
    text-align: center;
    .price {
      font-size: 15px;
      font-weight: 500;
    }
    .tag-price {
      font-size: 10px;
      font-weight: 500;
      text-decoration: line-through;
      margin-left: 3px;
    }
  }
}
</style>
